<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>尚品汇</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!--顶部导航条-->
    <div class="topbar">
      <div class="container clearfix">
        <div class="welcome leftfix">
          <span class="hello">尚品汇欢迎你</span>
          <span>请</span>
          <a href="#" class="login">登录</a>
          <a href="#" class="register">免费注册</a>
        </div>
        <div class="topbar-nav rightfix">
          <ul class="list">
            <li><a href="#">我的订单</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的尚品汇</a></li>
            <li><a href="#">尚品汇会员</a></li>
            <li><a href="#">企业采购</a></li>
            <li><a href="#">关注尚品汇</a></li>
            <li><a href="#">合作招商</a></li>
            <li><a href="#">商家后台</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!--头部-->
    <div class="header">
      <div class="container clearfix">
        <div class="logo leftfix">
          <img src="./img/logo.png" alt="尚品汇" />
        </div>
        <div class="search rightfix">
          <form>
            <input type="text" placeholder="请输入商品名称" />
            <button></button>
          </form>
        </div>
      </div>
    </div>
    <!--主导航条-->
    <div class="main-nav">
      <div class="container clearfix">
        <div class="all-types leftfix">全部商品分类</div>
        <ul class="main-nav-list leftfix clearfix">
          <li><a href="#">尚品超市</a></li>
          <li><a href="#">优惠券</a></li>
          <li><a href="#">买啥</a></li>
          <li><a href="#">尚品家电</a></li>
          <li><a href="#">尚品生鲜</a></li>
          <li><a href="#">plus会员</a></li>
          <li><a href="#">进口好物</a></li>
          <li><a href="#">品德闪购</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">五金店</a></li>
        </ul>
      </div>
    </div>
    <!---主要内容区-->
    <div class="main-content">
      <div class="container clearfix">
        <ul class="slide-nav leftfix">
          <li>
            <a href="#">手机/运营商/数码</a>
            <div class="second-menu">
              <dl class="clearfix">
                <dt><a href="#">电子书刊</a></dt>
                <dd><a href="#">电子书</a></dd>
                <dd><a href="#">网络原创</a></dd>
                <dd><a href="#">数字杂志</a></dd>
                <dd><a href="#">多媒体图书</a></dd>
              </dl>
              <dl class="clearfix">
                <dt><a href="#">电子书刊</a></dt>
                <dd><a href="#">电子书</a></dd>
                <dd><a href="#">网络原创</a></dd>
                <dd><a href="#">数字杂志</a></dd>
                <dd><a href="#">多媒体图书</a></dd>
              </dl>
            </div>
          </li>
          <li><a href="#">电脑/办公</a></li>
          <li><a href="#">家具/家居/家装/厨具</a></li>
          <li><a href="#">男装/女装/童装/内衣</a></li>
          <li><a href="#">美妆/个护清洁/宠物</a></li>
          <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
          <li><a href="#">男鞋/运动/户外</a></li>
          <li><a href="#">房产/汽车/汽车用品</a></li>
          <li><a href="#">母婴/玩具乐器</a></li>
          <li><a href="#">食品/酒类/生鲜/特产</a></li>
          <li><a href="#">艺术/礼品/鲜花/特产</a></li>
          <li><a href="#">医药保健/计生情趣</a></li>
          <li><a href="#">图书/文娱/教育/电子书</a></li>
          <li><a href="#">机票/酒店/旅游/生活</a></li>
          <li><a href="#">众筹/白条/保险/企业金融</a></li>
          <li><a href="#">安装/维修/清洗/二手</a></li>
        </ul>
        <div class="banner leftfix">
          <img src="./img/banner主图.png" alt="" />
        </div>
        <div class="slide-other leftfix">
          <div class="message">
            <div class="title clearfix">
              <span class="leftfix">尚品快报</span>
              <a href="#" class="rightfix">更多&nbsp;></a>
            </div>
            <div class="msg-list">
              <ul>
                <li>
                  <a href="#">[特惠] 毛衣+直筒裤才是YYDS</a>
                </li>
                <li>
                  <a href="#">[特惠] 毛衣+直筒裤才是YYDS</a>
                </li>
                <li>
                  <a href="#">[特惠] 毛衣+直筒裤才是YYDS</a>
                </li>
                <li>
                  <a href="#">[特惠] 毛衣+直筒裤才是YYDS</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="other-nav">
            <ul class="other-nav-list clearfix">
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
            </ul>
            <ul class="other-nav-list clearfix">
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
            </ul>
            <ul class="other-nav-list clearfix">
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
              <li>
                <div class="picture"></div>
                <span>话费</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--秒杀-->
    <div class="seckill">
      <div class="container clearfix">
        <img src="./img/seckill.png" alt="" />
        <img src="./img/banner1.png" alt="" />
        <img src="./img/banner2.png" alt="" />
        <img src="./img/banner3.png" alt="" />
        <img src="./img/baner4.png" alt="" />
      </div>
    </div>

    <!--楼层-->
    <div class="floor">
      <div class="container">
        <!---上部分-->
        <div class="floor-nav clearfix">
          <span class="floor-name leftfix">家用电器</span>
          <ul class="floor-nav-list rightfix">
            <li><a href="#">热门</a></li>
            <li><a href="#">大家电</a></li>
            <li><a href="#">生活家电</a></li>
            <li><a href="#">厨房家电</a></li>
            <li><a href="#">应急家电</a></li>
            <li><a href="#">空气/净水</a></li>
            <li><a href="#">高端电器</a></li>
          </ul>
        </div>
        <!--下部分-->
        <div class="floor-info clearfix">
          <div class="item item1">
            <ul class="item1-list clearfix">
              <li><a href="#">节能补贴</a></li>
              <li><a href="#">4k电视</a></li>
              <li><a href="#">空气净化器</a></li>
              <li><a href="#">IH电话煲</a></li>
              <li><a href="#">滚动洗衣机</a></li>
              <li><a href="#">电热水器</a></li>
            </ul>
            <img src="./img/编组.png" alt="" />
          </div>

          <div class="item item2">
            <img src="./img/appliance_banner07.png" alt="" />
          </div>
          <div class="item item3">
            <img src="./img/微波炉.png" alt="微波炉" />
            <img src="./img/电饭煲.png" alt="电饭煲" />
          </div>
          <div class="item item4">
            <img src="./img/冰箱.png" alt="" />
          </div>
          <div class="item item5">
            <img src="./img/电饭煲.png" alt="" />
            <img src="./img/电饭煲2.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!--页脚-->
    <div class="footer">
      <div class="container">
        <div class="top-links clearfix">
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
          </ul>
          <ul class="links-list">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">购物流程</a></li>
          </ul>
        </div>
        <div class="line"></div>
        <div class="bottom-links">
          <ul class="bottom-links-list clearfix">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">合作招商</a></li>
            <li><a href="#">商家帮助</a></li>
            <li><a href="#">营销中心</a></li>
            <li><a href="#">手机尚品</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">销售联盟</a></li>
            <li><a href="#">隐私政策</a></li>
          </ul>
          <div class="copyight">京ICP128632827263</div>
        </div>
        
      </div>
    </div>
  </body>
</html>
